<template>
  <view class="gi-card" :class="`gi-card-${props.type}`" :style="props._style">
    <view class="gi-card__header" :style="props.headerStyle">
      <view class="gi-card__title">
        <slot name="title">{{ props.title }}</slot>
      </view>
      <view class="gi-card__extra">
        <slot name="extra"></slot>
      </view>
    </view>
    <view class="gi-card__body" :style="props.bodyStyle">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { CSSProperties, PropType } from 'vue'

const props = defineProps({
  type: {
    type: String as PropType<'' | 'second'>,
    default: '',
  },
  title: {
    type: String,
    default: '',
  },
  _style: {
    type: Object as PropType<CSSProperties>,
    default: () => ({}),
  },
  headerStyle: {
    type: Object as PropType<CSSProperties>,
    default: () => ({}),
  },
  bodyStyle: {
    type: Object as PropType<CSSProperties>,
    default: () => ({}),
  },
})
</script>

<style lang="scss" scoped>
.gi-card {
  margin: 0 10px;
  font-size: 14px;
  background-color: #fff;

  .gi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    border-bottom: 1px solid $color-border;

    .gi-card__title {
      font-size: 15px;
      font-weight: 500;
    }
  }

  .gi-card__body {
    box-sizing: border-box;
    padding: 8px;
    overflow: hidden;
  }
}

.gi-card-second {
  background-color: transparent;
  .gi-card__header {
    height: 35px;
    padding: 0;
    border-bottom: 0;
    .gi-card__title {
      font-size: 14px;
      font-weight: 500;
    }
  }
  .gi-card__body {
    padding: 0;
    background-color: #fff;
  }
}
</style>
